<template>
  <base-layout
    :visibleContent2="true"
    :visibleContent3="true"
    :visibleContent4="true"
    :visibleContent5="true"
    :visibleContent6="true"
    :dialogVisible="dialogVisible"
    :dialogTitle="dialogTitle"
    @dialog-close="dialogClose"
  >
    <template #searchPanel>
      <CarInfo
        :formValue="fromdata"
        :workOrderType="type"
        :disabled="disabled"
        ref="carInfo"
      />
    </template>
    <template #contentPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="fromdata"
        :rules="rules"
        label-width="90px"
        label-position="right"
        :disabled="disabled"
      >
        <el-row>
          <el-col :span="12">工单信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item
              label="工单编号:"
              prop="workOrderCode"
            >
              <el-input
                disabled
                v-model.number="fromdata.workOrderCode"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="单据期:"
              prop="receiptsTime"
            >
              <el-date-picker
                v-model="fromdata.receiptsTime"
                type="date"
                style="width: 195px"
                placeholder="请选择"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="预计交车:"
              prop="receiptsTime"
            >
              <el-date-picker
                v-model="fromdata.receiptsTime"
                type="date"
                style="width: 195px"
                placeholder="请选择"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="故障描述:"
              prop="remark"
            >
              <textarea
                clearable
                v-model="fromdata.remark"
                class="w-200"
                :disabled="disabled"
              ></textarea>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="检测结果/故障原因:"
              prop="remark"
              label-width="140px"
            >
              <textarea
                clearable
                v-model="fromdata.remark"
                class="w-200"
                :disabled="disabled"
              ></textarea>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel2>
      <div v-if="fromdata.workOrderCode">
        <ProjectList
          ref="ProjectList"
          @setTotalAmount="setTotalAmount"
          :list="fromdata.projectList"
          :disabled="disabled"
        />
      </div>
    </template>

    <template #contentPanel3>
      <div v-if="fromdata.workOrderCode">
        <PartsList
          ref="PartsList"
          @setTotalAmount="setTotalAmount"
          :list="fromdata.partsList"
          :disabled="disabled"
        />
      </div>
    </template>

    <template #contentPanel4>
      <div v-if="fromdata.workOrderCode">
        <BoutiqueList
          ref="BoutiqueList"
          @setTotalAmount="setTotalAmount"
          :list="fromdata.jpList"
          :disabled="disabled"
        />
      </div>
    </template>

    <template #contentPanel5>
      <div v-if="setpsList != null && setpsList.length > 0">
        <el-row>
          <el-col>工单作业进度</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <Steps :setpsList="setpsList" />
      </div>
    </template>

    <template #contentPanel6>
      <div
        class="text_right"
        v-if="fromdata.workOrderCode"
      >
        <p>项目总金额+配件总金额+精品总金额： <span class="color_red">￥{{fromdata.amount}}</span></p>
        <p>项目优惠金额+配件优惠金额+精品优惠金额： <span class="color_red">￥{{fromdata.discountAmount}}</span></p>
        <p>报价金额 <span class="color_red">￥{{fromdata.shouldAmount}}</span></p>
      </div>
      <Options
        :fromdata="orderInfo"
        :workOrderId="orderId"
        :workOrderType="orderType"
      />
    </template>

  </base-layout>
</template>
<script>
import ProjectList from '@/views/after-sale/workOrderManage/simplicity/components/projectList';//拆分-项目列表
import PartsList from '@/views/after-sale/workOrderManage/simplicity/components/partsList';//拆分-配件列表
import BoutiqueList from '@/views/after-sale/workOrderManage/simplicity/components/boutiqueList';//拆分-精品列表
import CarInfo from '@/views/after-sale/workOrderManage/simplicity/components/carInfo';//拆分-车辆信息
import Options from "@/views/after-sale/workOrderManage/view/components/options";

import { getUserOrTem } from '@/utils/index';
import { CarBrand, Steps } from '@/components/index' //项目选择组件
import { parseTimeToYMDHMS, getDict, getStoreId } from '@/utils'
import baseMixin from '@/mixins/base'
import config from "@/views/after-sale/workOrderManage/view/config/index";//导入配置文件

export default {
  components: { CarBrand, ProjectList, PartsList, BoutiqueList, CarInfo, Steps, Options },
  mixins: [baseMixin({})],
  data () {
    return {
      disabled: true,
      fromdata: {
        amount: undefined,
        carBrandName: "",
        carModelId: undefined,
        carSeriesId: undefined,
        carBrandId: undefined,
        discountAmount: undefined,
        licensePlateNumber: "",
        partsList: [],
        pickCarId: undefined,
        projectList: [],
        jpList: [],
        receiptsTime: "",
        remark: "",
        shouldAmount: undefined,
        storeId: getStoreId(),
        workOrderCode: "",
        clientCar: {}
      },
      type: undefined,
      rules: {},
      dict: {},
      orderInfo: {},
      orderId: null,
      orderType: null,
    }
  },
  computed: {
    setpsList () {
      let field = this.getConfig.orderStatusListField || '';
      return field && this.orderInfo[field];
    },
    couponAmuount () {
      let sum = 0, coupList = this.fromdata.couponDomains;
      if (Array.isArray(coupList) && coupList.length > 0) {
        coupList.map(item => {
          sum += item.denomination;
        })
      }
      return sum;
    }
  },
  async created () {
    this.dict = getDict(['客户会员等级', '客户类型', '班组类型', '收费类型']);
    const { id, type } = this.$route.params;
    this.orderType = type;
    this.orderId = id;
    this.getConfig = config[`workOrderType${this.orderType}`];
    let option = await this.getConfig.getOrderInfo(this.orderId);
    if (option.success) {
      this.orderInfo = option.data;
    }
    let { data, success } = await this.getConfig.getDeatilById(this.orderId);
    if (success) {
      data.projectList = data.carProjectLists ? data.carProjectLists : data.projectList;

      this.fromdata = {
        ...this.fromdata,
        ...data
      };
    }
  },
  methods: {
    //设置总金额、优惠劵查询
    setTotalAmount () {
      const { ProjectList, PartsList, BoutiqueList } = this.$refs;
      this.fromdata.amount = ProjectList.totalAmount + PartsList.totalAmount + BoutiqueList.totalAmount;
      this.fromdata.shouldAmount = ProjectList.totalDiscountAmount + PartsList.totalDiscountAmount + BoutiqueList.totalDiscountAmount;
      this.fromdata.discountAmount = this.fromdata.amount - this.fromdata.shouldAmount;
    },
  },
}
</script>
<style lang="scss" scoped>
.text_right {
  text-align: right;
}
.color_red {
  font-size: 26px;
  color: red;
}
.ft18 {
  font-size: 18px;
}
</style>
